<template>
    <div class="search-container">
        <form action="/" class="search-form">
            <van-search
                v-model="searchText"
                show-action
                :autofocus='true'
                background="#3296fa"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
                @focus="onFocus"
                @clear="onClear"
            />
        </form>
        <!-- 记录--结果 -->
        <SearchResult v-if="isResultShow" :search-text="searchText" />
        <!-- 联想记录 -->
        <SearchSuggestion v-else-if="searchText" @search="onSearch" :search-text="searchText" />
        <!-- 搜索历史 -->
        <SearchHistory @update-histories="searchHistorys = $event" :search-histories="searchHistorys" @search="onSearch" v-else />
        
    </div>
</template>

<script>
import SearchHistory from "./components/search-history";
import SearchResult from "./components/search-result";
import SearchSuggestion from "./components/search-suggestion";
import { setItem,getItem } from "@/utils/storage";
import { getSearchHistory } from "@/api/search";
import { mapState } from "vuex";
export default {
    name: "SearchIndex",
    components:{SearchSuggestion,SearchResult,SearchHistory},
    data() {
        return {
            searchText: "",
            isResultShow:false,//控制搜索结果
            searchHistorys:getItem('search-histories') || []
        };
    },
    watch:{
        searchHistorys(){
            setItem('search-histories',this.searchHistorys)
        }
    },
    computed:{
        ...mapState(['user'])
    },
    methods: {
        onSearch(val) {
            // 把输入框的内容改成要搜索的内容
            this.searchText = val

            // 记录搜索历史
            const index = this.searchHistorys.indexOf(val)
            if (index !== -1) {
                // 存在了 把重复项删除
                this.searchHistorys.splice(index,1)
            }
            // 把最新的搜搜历史数据放到顶部
            this.searchHistorys.unshift(this.searchText)
            // 如果用户已登录 把搜索历史存储到线上

            // 如果未登陆 把搜索历史存储到本地
            // setItem('search-histories',this.searchHistorys)
            // 打开搜索
            this.isResultShow = true
        },
        onCancel() {
            this.$router.back()
        },
        // 输入框获得焦点
        onFocus(){
            this.isResultShow = false;
        },
        // 清除输入内容
        onClear(){
            this.isResultShow = false;
            this.searchText = ''
        },
        async loadSearchHistories(){
            const localHistories = getItem('search-histories') || []
            if (this.user) {
                // 已登录
                // const { data } = await getSearchHistory()
                // // 让本地数据 合并线上的
                // this.searchHistorys = [...localHistories,...data.data.keywords]
            } else {
                // 未登录
                this.searchHistorys = [...localHistories]
            }
        }

    },
    created(){
        this.loadSearchHistories()
    }
};
</script>

<style lang="less" scoped>
.search-container{
    padding-top: 108px;
    .van-search__action{
        color: #ffffff;
    }
    .search-form{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
}
</style>